<script setup>
import AccessIntercept from '@/components/access-intercept/index.vue'
import FooterX from '@/components/footer-x/index.vue'
import PageContainerX from '@/components/page-container-x/index.vue'
import Cell from '@/components/cell/index.vue'
import CellItem from '@/components/cell-item/index.vue'
import ButtonX from '@/components/button-x/index.vue'
import {useMeeting} from '@/hooks/useMeeting'
import UniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'
import {fetchMeetingApplyInfoByIdAndMobile, postMeetingSign} from '@/api/meeting'
import to from 'await-to-js'
import {isInvalidData} from '@/utils/utils'
import {tip} from '@/utils/uni-api-wrap/toast'
import {isMPRelaxed} from '@/utils/validator'
import {reLaunch} from '@/utils/uni-api-wrap/route'

const { meetingDetail, reload } = useMeeting()
const mobile = ref('')
const applyInfo = ref(null)

const _fetchMeetingApplyInfoByIdAndMobile = async () => {
  if (isInvalidData(mobile.value)) return tip('手机号为空')
  if (!isMPRelaxed(mobile.value)) return tip('手机号格式错误')
  const [err, result] = await to(fetchMeetingApplyInfoByIdAndMobile(meetingDetail.value.id, mobile.value))
  if (err) return
  if (result.code !== 0) return tip(result.msg || '找不到会议报名信息')
  applyInfo.value = result.data?.register
}

const sign = async () => {
  const [err, result] = await to(postMeetingSign({ id: meetingDetail.value.id, type: 1, mobile: mobile.value }))
  if (err) return
  if (result.code !== 0) return tip(result.msg || '签到失败')
  tip('签到成功')
  setTimeout(() => {
    reLaunch('/pages/mine/sign-list')
  }, 500)
}

</script>

<template>
  <access-intercept @login-success="reload">
    <page-container-x>
      <template #header>
        <cell class="m32" text-align="left" align-items="center">
          <cell-item v-model="mobile" type="input" label="手机号" placeholder="输入手机查询报名信息">
            <template #rightIcon>
              <button-x size="mini" type="primary" @click="_fetchMeetingApplyInfoByIdAndMobile">查询</button-x>
            </template>
          </cell-item>
        </cell>
      </template>
      <template #context>
        <view class="meeting__container">
          <image class="meeting__cover" :src="meetingDetail?.imageUrl" mode="aspectFill" />
          <view class="meeting__name">会议：{{ meetingDetail?.name }}</view>
          <view class="meeting__registrationTime">活动时间：{{ meetingDetail?.activityTimeStr }}</view>
        </view>
        <cell class="m32" border v-if="applyInfo">
          <cell-item label="申请人" :value="applyInfo?.firstName"></cell-item>
          <cell-item label="申请人电话" :value="applyInfo?.mobile"></cell-item>
          <cell-item label="申请人性别" :value="applyInfo?.gender === 1 ? '男' : '女'"></cell-item>
          <cell-item label="申请人公司" :value="applyInfo?.companyName"></cell-item>
          <cell-item label="申请人职位" :value="applyInfo?.duties"></cell-item>
        </cell>
      </template>
      <template #footer>
        <footer-x class="plr32" background-color="transparent">
          <button-x :disabled="!applyInfo" type="primary" @click="sign">签到</button-x>
        </footer-x>
      </template>
    </page-container-x>
    <uni-popup ref="popup" type="center" :safe-area="false" :is-mask-click="false">
      <template #default>
        <view class="meeting__container">
          <image class="meeting__cover" :src="meetingDetail?.imageUrl" mode="aspectFill" />
          <view class="meeting__name">会议：{{ meetingDetail?.name }}</view>
          <view class="meeting__registrationTime">活动时间：{{ meetingDetail?.activityTimeStr }}</view>
          <view class="meeting__mask">会议已超过截止时间</view>
        </view>
      </template>
    </uni-popup>
  </access-intercept>
</template>

<style scoped lang="scss">

::v-deep {
  .page-container {
    background-color: #F8F8F8;
  }
}
.meeting__container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20rpx;
  width: 650rpx;
  border-radius: 20rpx;
  background-color: #fff;
  overflow: hidden;
  .meeting__cover {
    width: 100%;
    height: 405rpx;
  }
  .meeting__name {
    @include fs36w600;
    text-align: left;
  }
  .meeting__registrationTime {
    @include fs28w600;
    text-align: left;
  }
  .meeting__mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 140rpx 32rpx;
    color: #656464;
    font-size: 48px;
    text-align: center;
    background-color: rgba(#fff, .5);
    z-index: 99;
  }
}
</style>
